Scalable Vector Graphics
Scalable Vector Graphics (SVG) is an XML format for rendering two-dimensional vector graphics. Aside from being a graphics format, SVG also offers interactivity, similar to HTML's image map functionality. It also has some animation functionality. Specification Document type definition The DTD for an SVG image is: Data types Defined data types for an SVG document are: ; integer : Basically a long integer. Ex. 9, -2. ; number : Single-precision real number value. (May be in either decimal or scientific notation) Ex. 6.1, -6E-5. ; length : A measurement of length. A number with an optional unit. May also be a percentage. Ex. 12px, 10pt, 1in, 20, 90%. ; coordinate : A measurement of length from the origin. ; list (of x) : A list of values. ; number-optional-number : A special list of numbers with one or two elements. ; angle : An angle measure with an optional unit (deg, rad, grad). ; color : An sRGB color. May be a color keyword or number specification. ; paint : Type of paint to use. ; percentage : A percentage used as reference to another measure such as length. ; transform-list ; uri : A Uniform Resource Identifier. ; frequency : Used in aural CSS. A number followed by either Hz (hertz) or kHz (kilohertz). ; time : A measure of time. A number followed by either ms (millisecond) or s (second). Document structure An SVG image must be a valid SVG document with the " " root element, which has the following attributes: The element enables grouping of different items in the document. Paths Paths are shape outlines which can be filled, stroked or used as clipping path. Paths are defined by the element. Path data Path data has its own syntax in a d attribute. Example: ; Move to (moveto) A move to command starts a new point. The effect is as if the "pen" were lifted and moved to a new location. An uppercase "M" is absolute, a lowercase "m" is relative. At least one coordinate pair (separated by a space) is required. When more than one coordinate pairs are represent, those will represent implicit line to commands. Multiple subpaths may be specified by specifying multiple move to commands. ; Close path (closepath) A close path command closes the current path (or subpath) and creates a line from the current point to the current subpath's initial point. Both uppercase and lowercase "z"s specify a close path command. ; Line to (lineto, horizontal lineto, vertical lineto) A line to command draws a line from the current point to a new point. "L" (absolute) and "l" (relative) specifies a line to command with coordinate pairs; at least one coordinate pair (separated by a space) is required. "H" (absolute) and "h" (relative) specifies a horizontal line to command with an x-coordinate. "V" (absolute) and "v" (relative) specifies a vertical line to command with a y-coordinate. More than one line to commands draw a polyline. ; Cubic Bézier curve commands (curveto, smooth curveto) "C" (absolute) and "c" (relative) specify a cubic Bézier curve from the current point of the current path or subpath to the third coordinate using the first coordinate as the control point at the beginning of the curve and the second coordinate as the control point at the end of the curve; three coordinate pairs are used and at least one is required. More than one group of coordinate pairs specify a polybézier. "S" (absolute) and "s" (relative) is similar to the above, except that he first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. There are only two coordinate pairs in this command. Basic shapes These are basically the same as a path that would draw the specified shape. ; Rectangle Rectangles and rounded rectangles are specified using the element. Example: ; Circle Circles are defined using a center point and a radius with the element. Example: ; Ellipse Ellipses are defined by its center point and two radii with the element. Example: ; Line Lines are defined using the element. Example: ; Polygon Custom polygons are defined using the element. These are defined using a space-separated list of points in the polygon. Example: Text Text can be included using the element. Text is placed in the content of the element. Painting SVG paths or text may be stroked, filled or outlined using a solid or gradient color or a pattern with any level of transparency. Colors may also be inherited from the parent using "currentColor". SVG uses the sRGB color space by default. Example References * Official Specification Category:XML-based file formats Category:Vector graphics file formats